<template>
  <div class="coin_charge">
    <div class="coin_chargeMain">

        <ul class="top">
          <li>
            <h6>
              我的金币(个)：
            </h6>
            <h2>
              {{myInfo.coin}}
            </h2>
          </li>
          <li>
            <h6>
              累计充值(个)：
            </h6>
            <h2>
              {{myInfo.total_amount}}
            </h2>
          </li>
          <li>
            <h6>
              累计消费(个)：
            </h6>
            <h2>
              {{myInfo.statistics.coin_spend}}
            </h2>
          </li>
        </ul>

       <ul class="midBtn">
        	<li @click="midBtnFn(coin_cIdx)" :class="{'midBtnAc':midBtnIndex==coin_cIdx}" v-for="(coin_cIt,coin_cIdx) in coin_cBtn" :key="'coin_cIt_0'+coin_cIdx">
            <span>
              {{coin_cIt}}
            </span>
          </li>
        </ul>

        <ul class="botBg">
        	<li class="chargeLiBg" v-show="midBtnIndex==0">

            <div class="chargeYouhui">
              <h2 class="c_title">
                优惠码
              </h2>
              <div class="chargeYouhuiMainBg">
                <dl>
                  <dt>
                    <input @input="yhmCodeInpFn" placeholder="请输入优惠码" type="text" v-model="yhmCode">
                  </dt>
                  <dd @click="cxChargeCodeFn">
                    查询
                  </dd>
                </dl>

              </div>

              <div v-show="yhmCode.length!==0" class="yhmTxt">
                <span v-if="yhmCodeText.code==200">
                  此优惠码有效，已减免{{yhmCodeText.data.money}}元
                </span>
                <span v-else>
                  {{yhmCodeText.msg}}
                </span>
              </div>
            </div>


            <div class="chargeNumBg">
              <h2 class="c_title">
                充值类型
              </h2>

              <ul class="chargeNum">
                <li@click="c_NumLiBtnFn(c_NumLiIdx)" class="c_NumLi_00" :class="{'c_NumAc':c_NumLiIdx==cur_c_NumLi}" v-for="(c_NumLiIt,c_NumLiIdx) in chargeTypeList" :key="'c_NumLiIt_0'+c_NumLiIdx">
                  <div class="tu">
                    <img src="@/assets/img/coinCharge/earth.png" >
                    <h2>
                      {{c_NumLiIt.name}}
                    </h2>
                  </div>
                  <div class="txt">
                    ￥{{c_NumLiIt.money}}
                  </div>
                </li>
                <!-- <li class="c_NumLi_01">
                  <input type="number" v-model="transNum"/>
                  <span>
                    元
                  </span>
                  <img src="@/assets/img/coinCharge/trans.png" class="trans">
                  <img src="@/assets/img/coinCharge/earth.png" class="earth">
                  <p>
                    9999
                  </p>
                </li> -->
              </ul>

            </div>
            <div class="chargeMethodBg">
              <h2 class="c_title">
                支付方式
              </h2>

              <ul class="chargeMethod">
              	<li v-show="payType.balance==1" @click="c_methFn(0)" :class="{'c_NumAc':cur_c_NumAc==0}">
                  <div class="tu">
                    <img src="@/assets/img/coinCharge/yuan.png" >
                  </div>
                  <div class="txt">
                    <p>
                      余额支付
                    </p>
                    <span>
                      余额：￥{{myInfo.balance}}
                    </span>
                  </div>
                </li>
              	<li v-show="payType.wxpay==1" @click="c_methFn(1)" :class="{'c_NumAc':cur_c_NumAc==1}">
                  <div class="tu">
                    <img src="@/assets/img/coinCharge/wxpay.png" >
                  </div>
                  <div class="txt">
                    <p>
                      微信支付
                    </p>
                  </div>
                </li>
              	<li v-show="payType.alipay==1" @click="c_methFn(2)" :class="{'c_NumAc':cur_c_NumAc==2}">
                  <div class="tu">
                    <img src="@/assets/img/coinCharge/alipay.png" >
                  </div>
                  <div class="txt">
                    <p>
                      支付宝支付
                    </p>
                  </div>
                </li>
              </ul>

            </div>

            <div v-show="is_show_payCode" class="payCodeBg" ref="qrCodeDiv"></div>

            <div @click="goPay" class="goPayBtn">
              去支付
            </div>
          </li>
        	<li class="detailLiBg" v-show="midBtnIndex==1">
            <div class="detail_btnBg">
              <div @click="acDetFn(detailBtnIt.num)" :class="{'acDetBtn':cur_detailBtnIdx==(detailBtnIdx==0?null:detailBtnIdx)}" v-for="(detailBtnIt,detailBtnIdx) in detailBtn" :key="'detailBtnIt_0'+detailBtnIdx" class="detail_btn">
                <span>
                  {{detailBtnIt.txt}}
                </span>
              </div>
            </div>

            <div class="detail_DataBg">
              <div v-show="gold_coinArr.length!==0" class="detailTable">

                <div class="gold_coin">
                  <table cellpadding="0" cellspacing="0" border="1">
                    <tr>
                      <th>
                        ID
                      </th>
                      <th>
                        金额
                      </th>
                      <th>
                        变动前
                      </th>
                      <th>
                        变动后
                      </th>
                      <th>
                        时间
                      </th>
                      <th>
                        备注
                      </th>
                    </tr>
                    <tr v-for="(gold_coinIt,gold_coinIdx) in gold_coinArr" :key="'gold_coinIt_0'+gold_coinIdx">
                      <td>{{gold_coinIt.id}}</td>
                      <td>{{gold_coinIt.coin}}</td>
                      <td>{{gold_coinIt.before}}</td>
                      <td>{{gold_coinIt.after}}</td>
                      <td>{{tg_Time(gold_coinIt.createtime)}}</td>
                      <td>{{gold_coinIt.memo}}</td>
                    </tr>
                  </table>
                    <FenYe ref="myFenye" :last_page="last_page"></FenYe>


                </div>
              </div>

              <div v-show="gold_coinArr.length==0" class="NoData">

                <div class="noData">
                  <img src="@/assets/img/coinCharge/empty.png" >
                </div>

                <div class="beizhu">
                  <img src="@/assets/img/coinCharge/warning.svg" >
                  <span>
                    系统仅显示您两年之内的余额明细，更早的余额明细不再显示
                  </span>
                </div>

              </div>

            </div>

          </li>
        </ul>

    </div>
  </div>
</template>

<script>
  import FenYe from "@/components/vuePagination.vue";

  import QRCode from 'qrcodejs2';
  export default{
    data(){
      return{
          coin_cBtn:[
            "充值",
            "明细"
          ],
          midBtnIndex:0,
          c_NumLiArr:[

          ],
          cur_c_NumLi:null,
          transNum:1,
          detailBtn:[
            {
              txt:"全部",
              num:null
            },
            {
              txt:"收入明细",
              num:1
            },
            {
              txt:"支出明细",
              num:2
            }
          ],
          cur_c_NumAc:null,
          cur_detailBtnIdx:null,

          yhmCode:"",
          yhmCodeText:"",
          //充值码
          chargeCode:"",
          //充值类型列表
          chargeTypeList:[],
          //当前充值类型
          cur_charge_type:{},
          payType:{},
          //当前支付方式
          cur_pay_Type:"",
          // 当前订单号
          order_sn:"",
          //支付链接
          payLink:"",
          //付款二维码
          payQrCode:"",
          is_show_payCode:false,
          PayResTimer:null,

          // 全部明细
          gold_coinArr:[],

          //分页总页数
          last_page:null
      }
    },
    components:{
      FenYe
    },

    mounted() {
        let that=this;
        that.getChargeTypeFn();
        that.getPayTypeFn();
        that.getChargeReardFn(1);
    },
    deactivated() {
      let that=this;
      that.delPayResTimer();
      console.log("deactivated");
    },
    methods:{

      yhmCodeInpFn(){
        let that=this;
        that.yhmCodeText={};

      },
      // // 获取图形验证码
      // getImgVerCodeFn(){
      //   let that=this;
      //   this.$request.get(
      //       "/generic/captcha",
      //       {

      //       },
      //       {
      //         'Content-Type': 'multipart/form-data'
      //       }
      //     ).then((res)=>{
      //      	console.log("获取图形验证码请求成功：",res);
      //      })
      //      .catch((err)=>{
      //      	console.log("获取图形验证码请求失败：",err);
      //      });

      // },

      delPayResTimer(){
        let that=this;
        clearInterval(that.PayResTimer);
        that.PayResTimer=null;
      },
      addPayResTimer(){
        let that=this;
        that.PayResTimer=setInterval(()=>{
          that.cxPayStatusFn();
        },2500);

      },

      // 查询扫码支付状态
      cxPayStatusFn(){
        let that=this;
        console.log("that.order_sn:",that.order_sn);
        this.$request.get(
          "/order/queryPayResult",
          {
            order_sn:that.order_sn
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
         	console.log("查询扫码支付状态请求成功结果：",res);
          if(res.data.msg=="订单已支付"){
            console.log("删除轮询");
            that.delPayResTimer();
            that.is_show_payCode=false;
          }

         })
         .catch((err)=>{
         	console.log("查询扫码支付状态请求失败：",err);
         });
      },

      // 去支付
      goPay(){
          let that=this;
          that.chargeCoin();
      },
      // 充值金币
      chargeCoin(){
        let that=this;

        this.$request.post(
            "/order/coin",
            {
              cid:that.cur_charge_type.id,
              code:that.chargeCode,
              pay_type:that.cur_pay_Type
            },
            {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          ).then((res)=>{
           	console.log("充值金币请求成功：",res);

            if(that.cur_pay_Type!=="balance"){
             this.$refs.qrCodeDiv.innerHTML="";
             that.order_sn=res.data.data.order_sn;
              new QRCode(this.$refs.qrCodeDiv, {
                 	  text: res.data.data.qr_code,
                 	  width: 200,
                 	  height: 200,
                 	  colorDark: "#333333", //二维码颜色
                 	  colorLight: "#ffffff", //二维码背景色
                 	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
              });
              that.is_show_payCode=true;
              that.addPayResTimer();
            }else{
              if(res.data.code==200){
                this.$bus.$emit("toastEvent",res.data.msg);
                this.$bus.$emit("refreshU_InfoEvent");
              }
            }


           })
           .catch((err)=>{
           	console.log("充值金币请求失败：",err);
           });


        // if(that.chargeCode){

        // }else{
        //     this.$bus.$emit("toastEvent","充值码无效!");
        // }
      },

      // 查询充值码
      cxChargeCodeFn(){
        let that=this;

        this.$request.get(
          "/recharge/queryCode",
          {
            code:that.yhmCode
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
          console.log("查询充值码res:",res);
          that.yhmCodeText=res.data;
          that.chargeCode=res.data.data.code;
          console.log("查询充值码请求成功：",that.chargeCode);

         })
         .catch((err)=>{
         	console.log("查询充值码请求失败：",err);
         });
      },
      // 支付方式
      getPayTypeFn(){
        let that=this;

        this.$request.get(
          "/order/getPayment",
          {

          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
          that.payType=res.data.data;
         	console.log("支付方式请求成功：",res);
         	//console.log("支付方式请求成功：",that.payType);

         })
         .catch((err)=>{
         	console.log("支付方式请求失败：",err);
         });
      },
      // 充值类型
      getChargeTypeFn(){
        let that=this;

        this.$request.get(
          "/recharge/category",
          {

          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
          that.chargeTypeList=res.data.data;
          console.log("充值类型请求成功：",that.chargeTypeList);

         })
         .catch((err)=>{
         	console.log("充值类型请求失败：",err);
         });
      },


      c_methFn(val){
          let that=this;
          that.cur_c_NumAc=val;
          if(that.cur_c_NumAc==0){
            that.cur_pay_Type="balance";
            that.is_show_payCode=false;
          }else if(that.cur_c_NumAc==1){
            that.cur_pay_Type="wxpay";
          }else if(that.cur_c_NumAc==2){
            that.cur_pay_Type="alipay";
          }


          that.delPayResTimer();
          that.is_show_payCode=false;

        },

        // 金币明细
        getChargeReardFn(val){
          let that=this;
          console.log("金币明细");
          this.$request.get(
            "/log/coin",
            {
              page:val,
              type:that.cur_detailBtnIdx
            },
            {
              'Content-Type': 'multipart/form-data'
            }
          ).then((res)=>{
           	console.log("金币明细请求成功：",res);

            that.gold_coinArr=res.data.data.data;

            console.log("this.$refs.myFenye:",this.$refs.myFenye);
             that.last_page=res.data.data.last_page;
             this.$refs.myFenye.fetchData();

           })
           .catch((err)=>{
           	console.log("金币明细请求失败：",err);
           });

        },

        acDetFn(val){
          let that=this;
          that.cur_detailBtnIdx=val;
          that.getChargeReardFn(1);
          console.log("acDetFn");
        },
      c_NumLiBtnFn(val){
        let that=this;
        that.cur_c_NumLi=val;
        that.cur_charge_type=that.chargeTypeList[that.cur_c_NumLi];
        console.log("当前充值类型：",that.cur_charge_type);
      },
        midBtnFn(val){
          let that=this;
          that.midBtnIndex=val;
          console.log("midBtnFn:",val);
        }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .c_NumAc{
  	border-color: #2c8eff !important;
  }

  ul{
    list-style: none;
  }

  .c_NumAc:after{
  	content: "";
  	position: absolute;
  	bottom: -1px;
  	right: -1px;
  	width:38px;
  	height: 36px;
  	background: url(../assets/img/coinCharge/selected.png) no-repeat center center;
  	background-size: 100% 100%;
  }

  .coin_charge{
  	padding: 55px;
  	.coin_chargeMain{
  		.top{
  			display: flex;
  			flex-direction: row;
  			li{
  				margin-right: 170px;
  				h6{
  					    font-size: 14px;
  					    color: #969696;
  						font-weight: normal;
  						line-height: 20px;
  				}
  				h2{
  					    margin-top: 15px;
  					    font-weight: bold;
  					    font-size: 32px;
  					    color: #282828;
  						line-height: 32px;
  				}
  			}
  		}

  		.midBtn{
  			display: flex;
  			flex-direction: row;
  			padding: 0 15px;
  			margin-top: 40px;
  			li{
  				padding: 0 30px;
  				span{
  					display: block;
  					cursor: pointer;
  					height: 50px;
  					line-height: 50px;
  					//color: #2c8eff;
  					color: #666;
  					font-size: 16px;
  					border-bottom: 2px solid transparent;
  				}
  			}

  			.midBtnAc{
  				span{
  					border-color: #2c8eff;
  					color: #2c8eff;
  				}
  			}
  		}

  		.botBg{
  			.c_title{
  				font-size: 18px;
  				color: #282828;
  				line-height: 24px;
  				font-weight: normal;
  			}
  			.chargeLiBg{

          .chargeYouhui{
  					padding: 40px 0;
            .chargeYouhuiMainBg{
              margin-top: 15px;
              dl{
                display: flex;
                flex-direction: row;
                dt{
                  input{
                        border-radius: 4px;
                        border: 1px solid #DCDFE6;
                        color: #606266;
                        display: inline-block;
                        font-size: 15px;
                        height: 40px;
                        line-height: 40px;
                        outline: 0;
                        padding: 0 15px;
                        width: 200px;
                  }
                }
                dd{
                  background: #2c8eff;
                  color: #fff;
                  font-size: 15px;
                  height: 40px;
                  line-height: 40px;
                  // padding:0 15px;
                  width: 65px;
                  cursor: pointer;
                  border-radius: 4px;
                  text-align: center;
                  margin-left: 10px;
                }
              }
            }

            .yhmTxt{
              span{
                display: block;
                color: #666;
                font-size: 14px;
                line-height: 22px;
                margin: 10px 0;
              }
            }
          }

  				.chargeNumBg{
  					padding: 40px 0;
  					.chargeNum{
  						display:flex;
  						flex-direction: row;
  						flex-wrap: wrap;
  						margin-top: 15px;
  						li{
  							    height: 98px;
  							    border: 1px solid #d4d4d4;
  							    border-radius: 8px;
  							    overflow: hidden;
  								margin: 10px 7px;
  								cursor: pointer;
  								position: relative;
  						}

  						li:hover{
  							border-color: #999;
  						}
  						.c_NumLi_00{
  							width: 256px;
  							display: flex;
  							flex-direction: column;
  							justify-content: center;
  							align-items: center;
  							.tu{
  								display: flex;
  								flex-direction: row;
  								justify-content: center;
  								img{
  									display: block;
  									height: 34px;
  								}
  								h2{
  									font-size: 30px;
  									color: #282828;
  									font-weight: normal;
  									margin-left: 8px;
  									line-height: 34px;
  								}
  							}

  							.txt{
  								font-size: 18px;
  								color: #999;
  								line-height: 24px;
  								text-align: center;
  								margin-top: 6px;
  							}
  						}


  						.c_NumLi_01{
  							display: flex;
  							flex-direction: row;
  							padding: 0 30px;
  							align-items: center;
  							input{
  								display: block;
  								border: none;
  								outline: none;
  								color: #000;
  								font-size: 30px;
  								line-height: 98px;
  								height: 98px;
  								width: 150px;
  							}
  							span{
  								    font-size: 20px;
  								    color: #999999;
  									display: block;
  									line-height: 24px;
  							}
  							.trans{
  								height: 30px;
  							}
  							.earth{
  								height: 34px;
  							}
  							img{
  								display: block;
  								margin: 0 10px;
  							}
  							p{
  								width: 150px;
  								color: #000;
  								font-size: 15px;
  								line-height: 24px;
  								height: 24px;
  								overflow: hidden;
  							}
  						}
  					}
  				}
  				.chargeMethodBg{
  					padding: 40px 0;
  					.chargeMethod{
  						display: flex;
  						flex-direction: row;
  						li{
  							    width: 220px;
  							    height: 86px;
  							border: 1px solid #d4d4d4;
  							border-radius: 8px;
  							overflow: hidden;
  							margin: 10px 7px;
  							cursor: pointer;
  							position: relative;
  							display: flex;
  							flex-direction: row;
  							justify-content: center;
  							align-items: center;
  							.tu{
  								width: 40px;
  								height: 40px;
  								display: flex;
  								flex-direction: row;
  								align-items: center;
  								justify-content: center;
  								margin-right: 6px;
  								img{
  									display: block;
  									max-width: 100%;
  									max-height: 100%;
  								}
  							}

  							.txt{
  								display: flex;
  								flex-direction: column;
  								justify-content: center;
  								p{
  									    font-size: 16px;
  									    line-height: 26px;
  									    color: #4e4e4e;
  								}
  								span{
  									display: block;
  									    font-size: 14px;
  									    color: #969696;
  										line-height: 20px;
  								}
  							}
  						}
  						li:hover{
  							border-color: #999;
  						}
  					}
  				}
  				.goPayBtn{
  					    width: 184px;
  						text-align: center;
  					    border-color: #2c8eff;
  					    border-radius: 23px;
  					    background-color: #2c8eff;
  					    font-size: 16px;
  					    color: #fff;
  						height: 45px;
  						line-height: 45px;
  						margin: 50px auto 0;
  						cursor: pointer;
  				}

  				.goPayBtn:hover{
  					background: #66b1ff;
  				}
  			}

  			.detailLiBg{
  				.detail_btnBg{
  					display: flex;
  					flex-direction: row;
  					margin-top: 40px;
  					.detail_btn{
  						margin-right: 15px;
  						span{
  							display: block;
  							min-width: 70px;
  							height: 35px;
  							padding: 0 15px;
  							border: 1px solid #D4D4D4;
  							border-radius: 4px;
  							line-height: 35px;
  							text-align: center;
  							color: #999999;
  							cursor: pointer;
  						}
  					}
  					.acDetBtn{
  						span{
  							border-color: #2c8eff;
  							color: #2c8eff;
  						}
  					}
  				}

  				.detail_DataBg{
            margin-top: 45px;
            .gold_coin{
              table{
                border-collapse: collapse;
                width: 100%;
                border-color: #2c8eff;//#2c8eff;
                tr{
                  th{
                    text-align: center;
                    padding: 10px;
                    color: #2c8eff;
                    font-size: 16px;
                    font-weight: bolder;
                    line-height: 24px;
                  }
                  td{
                    text-align: center;
                    padding: 10px;
                    color: #666;
                    font-size: 14px;
                    line-height: 20px;
                  }
                }
              }
            }
  					.noData{
  						display: flex;
  						flex-direction: row;
  						justify-content: center;
  						align-items: center;
  						min-height: 600px;
  						img{
  							display: block;
  							max-width: 100%;
  							max-height: 100%;
  						}
  					}
  					.beizhu{
  						display: flex;
  						flex-direction: row;
  						align-items: center;
  						img{
  							display: block;
  							height: 14px;
  							margin-right: 3px;
  						}
  						span{
  							display: block;
  							font-size: 12px;
  							line-height: 14px;
  							color: #969696;
  						}
  					}
  				}
  			}
  		}
  	}
  }

  @media screen and (max-width:767px){
    
    
    .coin_charge .coin_chargeMain .botBg .detailLiBg .detail_btnBg .detail_btn span{
      padding: 0 10px;
    }
    
    .coin_charge{
      padding: 20px;
      .coin_chargeMain{
        .top{
            // justify-content: space-between;
            flex-wrap: wrap;
          li{
            margin: 0 10px 15px 0;
          }
        }

        .chargeNum{
          justify-content: center;
          .c_NumLi_01{
            flex-direction: column !important;
            align-items: center !important;
            height: auto !important;
            input[type="number"]{
              text-align: center;
            }
            img{
              margin:10px 0 !important;
            }
            p{
              text-align: center;
              margin-bottom: 15px;
            }
          }
        }

        .detail_DataBg{
          .beizhu{
            justify-content: center;
            span{
              width: 240px;
              margin-left: 10px;
            }
          }
        }

        .chargeMethod{
          margin-top: 15px;
          flex-direction: column !important;
          align-items: center;
        }
      }
    }
  }

  .payCodeBg{
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
</style>
